<template>
  <view>
    <nav-bar page-title="تەپسىلاتى"/>
    <view class="padding-lr" style="direction: rtl">
      <image :src="swiperDetail.image" style="width: 100%; height: 100vh" mode="aspectFit"/>
    </view>
    <view style="height: 200rpx"/>
    <view class="padding-30 safe-area-padding sign-btn" style="direction: rtl">
      <view class="btn" hover-class="hover" @click="onSign">تىزىملىتىش</view>
    </view>
  </view>
</template>
<script lang="ts">

import NavBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";

export default {
  name: "SwiperDetail",
  components: {NavBar},
  data() {
    return {
      swiperDetail: {}
    }
  },
  onLoad(query?: AnyObject) {
    this.swiperDetail = JSON.parse(decodeURIComponent(query.detail))
  },
  computed: {},
  methods: {
    onSign() {
      uni.makePhoneCall({
        phoneNumber: this.swiperDetail.phone //仅为示例
      });
      tips.toast('报名成功')
    }
  },
}
</script>
<style scoped lang="scss">
.sign-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;

  .btn {
    color: var(--text-icon-font-wh-1100, #FFF);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */


    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 11px;
    background: linear-gradient(298deg, #117EFF 3.79%, #6DB0FF 83.85%);
  }
}
</style>